Hello.
Welcome to the third shop.
In this show we are going to be styling how app using C Ss.
I am in the C Ss part of my text editor.
And so this is where I'm going to be adding the C Ss stylin for the app in order to apply style mean
to Amy hastier male element you more have a select on.
This selektah is the item you want to apply styling to.
Once you detect these select tell you that you now have to define the property that is what you want
to style and then you give the property value.
So in this case the what I am targeting here is this idea wrapper.
If I open my hate mail here far we've got the dethier Witten I.D. of rubber so that's what we're going
to tag it in this year says.
So that's this.
So the properties have assigned to it.
And are these one the margene to be able to automate it or send to the div in the middle of the page
that is sent out or corners so it does that automatically with the ease we've given it.
The height is the height background call or is this how we use Hexa decimal values for the background
colour.
If you know the names of the colours you're trying to use you can always specify them rather than use
the Hexa decimal.
It's up to you but I like you since the hexadecimal is a lot easier.
So if you want to know more by the hex scofflaws just do a google search on hex colours.
It would give you various websites and you can just pick one.
So that's the violin and then figure out where your style you more spend all your values with a semicolon.
If not stylin will not be applied and this time in place between these curly braces the left hand that
is right.
Okay so you call on was separate the property from the value.
Here is the Selecta.
K I have I some more styling from Line 9 till line 21 so the Heidi I am targeting in this case is the
change caller I.D. So if I go right on my hastier mail you can see I've given this input here have given
it an idea.
This is a button.
Giving it an idea of change kolok so that is the Select Tool I am targeting for with the C sets.
So this is my select top which is a side here.
These are the properties in blue and then in between the properties you got the call on the values is
this the wave.
Again how wide a want that input to be is to 60 pixels.
That's the height 80 pixels and so on.
So make sure you can play around with these values and see what values you like.
You don't necessarily have to stick with my values.
Just play around and see what you like.
Padding refers to the space inside the element.
In this case we're talking about the space inside the input box.
All right.
Body radios.
Inside this is a button sorry we're talking about the space inside the button.
Then when you are applying parred padding or margin there are four corners you need to play to and you
need to do it in the order of top right bottom left whereby you use both.
If you can specify each pixel value for each of the corners.
If you feel is better find one value it will be applied to all four corners in the order.
Just specify.
Top right bottom left.
The way I remember this is by using the word trouble.
And if you take out the vowels which are the awls from the trouble you are left with T for truck T for
top 4 right.
B for bottom left.
That's how I remember it.
Moderate yours makes give the bottom a bit of it around the corner by the last hour means I don't want
any shading any shadow around the bottom.
This is how you write a comment in here says who burst large asterisks and then say again comments how
quite useful you can use them for troubleshooting purposes.
If you don't want setting your code to be displayed so any way you have this comment ways greyed out
that code will not be displayed.
Again background call or use hex decimal values the font size then given it 20 pixels font refers to
a D text size margin 60 pixels in the margin where you specify a margin or padding you can specify save
from the top or from the left.
If you don't specify that then it is assumed that the padding will be applied to all the four corners.
Where on line 18 I have specified that I want.
There are one sixty one the top of the of the element to drop down 60 pixels from the top and also from
the left.
I wanted to move forward and read and 70 pixels.
And I give him the colour of white.
This column here refers to any text that will be rendered inside this input will be white.
I have added another set top which is the hey one tag on line twenty three.
So line 23 to 29 are the stiring for the H on limit so whereby you are not using D class you can use
the elements name as this selector.
So in this case I'm using the hate one as a selector.
So the stallion I'm defining here will be a play to any Each one element tagged on that page so the
texts are want that was survey on line 25.
How one did text any text entered to be aligned to be.
To dissent and that is how one is positioned in the centre padding said.
The padding from the top that is this space from the top.
I want to move down to create a space.
Andre there are 45 pixels from the top.
Also give me a call on 27 line 27 coal on white so this is a hex value for white.
LA refroze to this text.
Okay.
So any attempt will be white collar.
That's what this column means for the hainje one tag.
So if I say that and that's our lifestyle incomplete.
Okay.
Now the page has been saved.
Fire refresh those issues see this stylin appear.
All right so now we have style page so this is what it looks like now it's looking a bit prettier.
But nothing will happen.
In fact there's not going to happen because I have not implemented the javascript part of it yet.
So then I do that in the next lecture using a query which is a javascript library.
Thank you so much for watching.
Take care.
Bye for now.